<!--
 * @Author       : Li Ming Yang
 * @Date         : 2023-11-20 14:19:14
 * @Description  : 装修通用入口组件
-->
<template>
  <view class="deco-entry-common" :style="[style]">
    <deco-wrap v-for="(item, index) in data.content" :key="index" :name="item.name" :data="item" :from="data" :page="page"></deco-wrap>
    <!-- 广告弹窗 -->
    <deco-ad-popup :page="page"></deco-ad-popup>
  </view>
</template>

<script>
import Mitt from "@/decoration/utils/mitt"
import mixin from "@/decoration/mixins"
import DecoWrap from "@/decoration/components/common/deco-wrap/deco-wrap"
import { useStyle } from "@/utils/style"
export default {
  name: "deco-entry-common",
  components: { DecoWrap },
  mixins: [mixin],
  props: {
    page: { type: String, default: "" },
    data: { type: [Object, null], default: () => ({}) },
    scrollTop: { type: Number, default: 0 }
  },
  data() {
    return {
      mitt: new Mitt()
    }
  },
  computed: {
    style() {
      const style = {}
      style.background = this.data.config?.background
      style["--deco-background-color"] = this.data.config?.background
      return useStyle(style)
    }
  },
  watch: {
    scrollTop: {
      handler(top) {
        this.scroll(top)
      }
    }
  },
  mounted() {
    this.onEvents()
  },
  methods: {
    scroll(top) {
      this.mitt.emit("scroll", top)
    },
    refresh() {
      this.mitt.emit("refresh")
    },
    onEvents() {
      uni.$on("onReachBottom", () => {
        this.mitt.emit("onReachBottom")
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.deco-entry-common {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  position: relative;
  flex-direction: column;
}
</style>
